/* 
* FIX for Bug in Chrome 33.
* For some reason this bug only appeared on the demo page
*
*/ 
* {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix {
	from{ opacity: 1; }
	to{ opacity: 1; }
}
/*
* END FIX
*/
#zt-mainmenu {
	display: none !important;
}
#mobile-button {
	display: none !important;
}
h2 {
	text-align: center;
	color: white;
	background: none;
	margin: 0 auto !important;
	text-transform: none !important;
	font-weight: 100 !important;
	position: absolute;
	top: 25px;
	left: 340px;
	right: 340px;
}

.container {
	padding: 0 !important;
	width: 100% !important;
}
#demo-component {
	background-color: #f6f6f6;
}

/*
* === Menu =====
*/
#demo-menu-fill,
#demo-menu {
	width: 25%;
	background-color: #252530;
}
#demo-menu {
	float: left;
	margin-top: 50px;
}
#demo-menu-fill
#demo-menu-fill-inner {
	height: 100%;
}
#demo-menu-fill-inner,
#demo-menu-inner {
	border-left: 1px solid #313131;
}
#demo-menu h4 {
	margin: 0;
	padding: 10px;
	border-top: 1px solid #34343e;
	color: white;
	font-size: 20px;
	font-weight: 200;
	cursor: pointer;
}
.demo-menu-item .menu-content {
	display: none;
}
.demo-menu-item .menu-content.active {
	display: block;
}
.toggle-text {
	width: 90%;
	float: left;
}
.toggle-icon {
	width: 10%;
	float: right;
	text-align: right;
}
.toggle-icon::after {
	font-family: "FontAwesome";
	content: '\f054';
}
/*
* === Selected menu group
*/
.demo-menu-item.active {
	background-color: #34343e;
}
.demo-menu-item.active .menu-content {
	display: block;
}
#demo-menu .demo-menu-item.active h4 {
	font-weight: 900;
}
.demo-menu-item.active .toggle-icon::after {
	font-family: "FontAwesome";
	content: '\f107';
}
/*
* === Active menu item
*/
#demo-menu a {
	color: white;
	font-weight: 100;
}
#demo-menu li.active a {
	color: #8085e8;
	font-weight: 900;
}
#demo-menu ul {
	padding: 0;
	margin: 0;
}
#demo-menu li {
	padding: 10px;
	border-top: 1px solid #252530;
	list-style-type: none;
}

#demo-menu li.active {
    position: relative;
}
#demo-menu li.active::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid;
}
/*
 === Styleswitcher
*/
#styleswitcher {
	background: #252530;
	padding-left: 30px;
	height: 40px;
}
#styleswitcher ul {
	margin: 0;
}
#styleswitcher li {
	float: left;
	list-style-type: none;
	padding: 10px;
	margin-right: 5px;
	background-color: #34343e;
}
#styleswitcher li.active {
	background-color: #ffffff;
}
#styleswitcher a {
	font-weight: 100;
	color: white;
}
#styleswitcher li.active a {
	color: #313131;
	font-weight: 400;
}

#small-switcher {
	display: none;
}
/*
* === Chart switcher
*/
#chart-switcher {
	text-align: center;
	font-size: 400%;
	height: 0;
	margin: 0 20px;
}
#chart-switcher a {
	font-weight: 100;
	color: #888;
	position: relative;
	top: 230px;
}
#chart-switcher span {
	display: none;
	margin: 0 40px;
}
#chart-switcher #previous-example {
	float: left;
}
#chart-switcher #next-example {
	float: right;
}

/*
* === Demo buttons
*/
#demo-buttons {
	text-align: center;
	margin: 30px 0;
}

#demo-buttons a {
	background-color: #d6d1d1;
}
#demo-buttons a:hover {
	background-color: #40818b;
}
#demo-content {
	float: left;
	width: 75%;
	left: 20%;
	padding: 0;
	border: none;
}
#demo-content-container {
}
#demo-chart {
	background-color: #ffffff;
	padding: 30px 50px;
	min-height: 400px;
}
/*
* === Highslide =====
*/
.highslide-header {
	border-bottom: 1px solid silver;
}
.highslide-footer {
}

@media (min-width: 1600px) {
	#zt-header .container {
		padding: 0;
	}
}
@media (max-width: 1600px) {
	#zt-header .container {
		padding: 0;
	}
}

@media (max-width: 1170px) {
	#demo-menu h4 {
		font-size: 22px;
	}
}

@media (max-width: 768px) {
	h2 {
		display: none;
	}
	#demo-component {
		border: none;
	}
	#demo-menu {
		display: none;
		width: 100%;
	}
	#demo-menu-fill {
		display: none;
	}
	#demo-content {
		width: 100%;
	}
	#demo-content-container {
		padding: 0;
	}
	#demo-chart {
		padding: 0;
	}

	#chart-switcher {
		font-size: 100%;
		height: auto;
		margin: 10px 0;
	}
	#chart-switcher span {
		margin: 0 10px;
		display: inline;
	}
	#chart-switcher a {
		margin: 0 10px;
		position: static;
	}

	#chart-switcher #previous-example, #chart-switcher #next-example {
		padding: 0 10px;
	}
	#styleswitcher {
		display: none;
	}
	#small-switcher {
		display: block;
		padding: 0 10px;
	}
	#small-switcher a {
		float: left;
		margin-right: 2.5%;
		padding: 3.75%;
		width: 15%;
	}
	#small-switcher select {
		float: left;
		width: 75%;
		padding: 0;
		margin: 0;
	}
}